import React, { useEffect, useState } from "react";
import { Card, Col, Row, Table} from "antd";
import * as Icon from '@ant-design/icons';
import "./home.css";
import { getData } from "../../api";
import Item from "antd/es/list/Item";
import MyEcharts from '../../components/Echarts';
import axios from 'axios'; 
//table列的数据
const columns = [
  {
    title: "课程",
    dataIndex: "name",
  },
  {
    title: "今日购买",
    dataIndex: "todayBuy",
  },
  {
    title: "本月购买",
    dataIndex: "monthBuy",
  },
  {
    title: "总购买",
    dataIndex: "totalBuy",
  },
];
//订单统计数据
const countData = [
  {
    "name": "今日支付订单",
    "value": 1234,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "今日收藏订单",
    "value": 3421,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "今日未支付订单",
    "value": 1234,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  },
  {
    "name": "本月支付订单",
    "value": 1234,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "本月收藏订单",
    "value": 3421,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "本月未支付订单",
    "value": 1234,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  }
]
  //动态获取
  const iconToElement=(name)=>React.createElement(Icon[name])
  
const Home = () => {
  const role=localStorage.getItem('role')
  const username=localStorage.getItem('username')
  const lastLoginTimeStr = localStorage.getItem('lastLoginTime');
  const lastLoginTime = new Date(lastLoginTimeStr);
  // 格式化时间，使其更易读（这一步根据需要调整）
  const formattedTime = lastLoginTime.toLocaleString();
  console.log("权限",role);
  let userImg =''
  if(role==='user'){
   userImg = require("../../assets/images/user-default.png");
  }else{
    userImg=require("../../assets/images/机甲.png")
  }
  let pp=''
  if(role==='user'){
   pp = "普通小二"
   }else{
     pp="超级管理员"
   }
  //创建echart响应数据
  const [echartData,setEchartData]=useState({})
  //dom首次渲染完成
  useEffect(() => {
    getData().then(({ data }) => {
      console.log(data, "res");
      const { tableData,orderData,userData,videoData } = data.data;
      setTableData(tableData);
      //对于echarts数据的组装
      const order=orderData
      //对于x轴的数据
      const xData=order.date
      //series数据组装
      const keyArray=Object.keys(order.data[0])
      const series=[]
      keyArray.forEach(key=>{
        series.push({
          name:key,
          data:order.data.map(item=>item[key]),
          type:'line'
        })
      })
      setEchartData({
        order:{
          xData,
          series
        },
        user:{
          xData:userData.map(item=>item.date),
          series:[
            {
              name:'新增用户',
              data:userData.map(item=>item.new),
              type:'bar'
            },
            {
              name:'活跃用户',
              data:userData.map(item=>item.new),
              type:'bar'
            }
          ]
        },
        video:{
          series:[
            {
              data:videoData,
              type:'pie'
            }
          ]
        }
      })
    });
    
  }, []);
  //定义table数据
  const [tableData, setTableData] = useState([])

  return (
    <Row className="home">
      <Col span={8}>
        <Card hoverable>
          <div className="user">
            <img src={userImg}></img>
            <div className="userinfo">
              <p className="name">{username}</p>
              <p className="access">{pp}</p>
            </div>
          </div>
          <div className="login-info">
            <p>
              上次登录的时间:<span>{formattedTime}</span>
            </p>
            <p>
              上次登录地点:<span>洛阳</span>
            </p>
          </div>
        </Card>
        <Card>
          <Table rowKey={"name"} columns={columns} dataSource={tableData} pagination={false}></Table>
        </Card>
      </Col>
      <Col span={16}>
        <div className="num">
{
  countData.map((item,index)=>{
    return(
      <Card key={index}>
        <div className="icon-box" style={{background: item.color}}>
          {iconToElement(item.icon)}
        </div>
        <div className="detail">
          <p className="num">${item.value}</p>
          <p className="txt">{item.name}</p>
        </div>
      </Card>
    )
  })
}
        </div>
 {echartData.order&&<MyEcharts charData={echartData.order} style={{height:'280px'}}></MyEcharts>}
      <div className="graph">
{echartData.user&&<MyEcharts charData={echartData.user} style={{height:'240px', width:'50%'}} ></MyEcharts>}
{echartData.video&&<MyEcharts charData={echartData.video} isAxisChart={false} style={{height:'260px', width:'50%'}} ></MyEcharts>}
      </div>
      </Col>
    </Row>
  );
};
export default Home;
